<template>
  <div >
<!--    顶部模糊查询-->
    <div v-if="topInputShow">
      <el-form :inline="true" class="query" >
        <el-form-item label="楼栋名称">
          <el-input v-model="buildingName" style="width: 200px;height: 32px"></el-input>
        </el-form-item>
        <el-form-item label="楼栋编码">
          <el-input v-model="buildingCode" style="width: 200px;height: 32px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="localBuilding(1)" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" style="width: 93px;height: 35px;line-height: 10px" @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--  按钮行-->
    <el-row class="but">
      <el-button type="warning" @click="add(),dialogAddVisible=true"  style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-plus">添加</el-button>
      <el-button type="primary" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-edit" :disabled="upd" @click="selectUpdate()">修改</el-button>
      <el-button type="success" style="width: 93px;height: 35px;line-height: 10px" icon="el-icon-delete" :disabled="del" @click="batchDelete">删除</el-button>
      <el-button type="info" @click="outExe" style="width: 93px;height: 35px;line-height: 10px;" icon="el-icon-download">导出</el-button>
    </el-row>
<!--    隐藏栏-->
    <el-row class="btn-circle">
      <el-tooltip content="隐藏搜索" placement="top">
        <el-button icon="el-icon-search" size="mini" circle @click="topInputShows"></el-button>
      </el-tooltip>
      <el-tooltip content="刷新" placement="top">
        <el-button icon="el-icon-refresh" size="mini" circle @click="refresh"></el-button>
      </el-tooltip>

    </el-row>

    <el-table
        class="tab"
        :data="buildings"
        id="exportBuilding"
        style="width: 100%"
        @selection-change="selectChange"
    >
      <el-table-column
          width="50"
      type="selection">
      </el-table-column>
      <el-table-column
          label="序号"
          width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingId }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="楼栋名称"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="楼栋编码"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingCode }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="楼栋面积"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingAcreage }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="小区"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyCommunity.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              icon="el-icon-edit"
              type="text"
              size="mini"
              @click="updateBuilding(scope.row)"
              >更新</el-button>
          <el-button
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="tips(scope.row.buildingId)"
              >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="localBuilding"
          :current-page="current"
          :page-sizes="[5,10,15,20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="添加" :visible.sync="dialogAddVisible">
      <el-form >
        <el-form-item label="小区">
          <el-select v-model="building.communityId" placeholder="请选择">
            <el-option
                v-for="item in communitiesList"
                :key="item.communityId"
                :label="item.communityName"
                :value="item.communityId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋名称" >
          <el-input v-model="building.buildingName" ></el-input>
        </el-form-item>
        <el-form-item label="楼栋面积" >
          <el-input v-model="building.buildingAcreage" ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" >
          <el-date-picker
              v-model="building.createTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注" >
          <el-input v-model="building.remark" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogAddVisible = false" v-on:click="savaBuild">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更新" :visible.sync="dialogUpdateVisible">
      <el-form >
        <el-form-item label="小区">
          <el-select v-model="building.communityId" placeholder="请选择">
            <el-option
                v-for="item in communitiesList"
                :key="item.communityId"
                :label="item.communityName"
                :value="item.communityId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋名称" >
          <el-input v-model="building.buildingName" ></el-input>
        </el-form-item>
        <el-form-item label="楼栋面积" >
          <el-input v-model="building.buildingAcreage" ></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input  v-model="building.remark" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogUpdateVisible = false" v-on:click="savaBuild">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {


  name: "BuildingView",
  data(){
    return {
      topInputShow:true,
      buildings:null,
      dialogAddVisible:false,//添加
      dialogUpdateVisible:false,//修改,
      current:1,
      size:5,
      pages:0,
      total:0,
      buildingName:"",
      buildingCode:"",
      deptnull:"",
      upd:true,
      del:true,
      ids:[],
      communitiesList:"",
      communityName:"",
      building:{
        buildingId:0,
        buildingName:"",
        buildingCode:"",
        buildingAcreage:"",
        communityId:"",
        createTime:"",
        remark:"",
        communityName:"",
      },
      currentZyCommunityId:"",
    }
  },
  methods:{
    localBuilding(current){
      this.current = current;
      this.axios.get("building-page?current="+this.current+"&size="+this.size+"&buildingName="+this.buildingName+"&buildingCode="+this.buildingCode
      +"&communityId="+this.currentZyCommunityId)
          .then(result =>{
            this.buildings = result.data.data.records;
            this.pages = result.data.data.pages;
            this.total = result.data.data.total;
            this.communityList()
          })

    },
    //删除提示
    tips(buildingId,delFlagId) {
      this.delFlagId = delFlagId;
      this.buildingId = buildingId;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        // this.deleteRole(id);
        this.deleteBuild(buildingId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 普通删除
    deleteBuild(buildingId){
      this.axios.delete("building/"+buildingId)
          .then(result =>{
            if (result.data.code == 200){
              this.localBuilding(this.current);
            }
          })
    },
    communityList(){
      this.axios.get("communityList")
          .then(result =>{
            this.communitiesList = result.data.data;
          })
    },
    //隐藏模糊查询
    topInputShows(){
      this.topInputShow = !this.topInputShow;
    },
    refresh(){
      this.$router.go(0);
    },
    selectChange(selection){
      this.ids = selection.map(item => item.buildingId)
      this.upd = selection.length!=1
      this.del = !selection.length
    },
    //批量删除
    batchDelete(){
      this.axios.delete("builds/"+this.ids)
          .then(result =>{
            if (result.data.code == 200){

              this.localBuilding(this.current)
            }
          })
    },
    //选中修改
    selectUpdate(){
      this.axios.get("building/"+this.ids)
          .then(result =>{
            this.building = result.data.data;
          })
      this.dialogUpdateVisible = true;
    },
    add(){
      console.log("==============")

      this.nullBuilding();
      this.dialogAddVisible = true;
    },
    updateBuilding(building){
      this.dialogUpdateVisible = true;
      this.building = JSON.parse(JSON.stringify(building));
    },
    handleSizeChange(size) {
      this.size=size
      this.localBuilding(1)
    },
    reset(){
      this.buildingName = ""
      this.buildingCode=""
      this.$router.go(0)
    },
    //导出
    outExe(){
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {});
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = { raw: true };
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#exportBuilding").removeChild(fix),xlsxParam);
        document.querySelector("#exportBuilding").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#exportBuilding"),xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    savaBuild(){
      if (this.building.buildingId == 0){
        this.axios.post("building",this.building)
            .then(result =>{
              if (result.data.code == 200){
                this.localBuilding(this.current);
              }
            })
      }else{
        this.axios.put("building",this.building)
            .then(result =>{
              if (result.data.code == 200){
                this.localBuilding(this.current);
              }
            })
      }
      this.building = {
        buildingId:0,
        buildingName:"",
        buildingCode:"",
        buildingAcreage:"",
        communityId:"",
        createTime:"",
        remark:""
      }
    },
    nullBuilding(){
      this.building={
        buildingId:"",
        buildingName:"",
        buildingCode:"",
        buildingAcreage:"",
        communityId:"",
        createTime:"",
        remark:"",
        communityName:"",
      }
    },
    // 联动
    setCurrentZyCommunity(id){
      this.currentZyCommunityId=id
      this.localBuilding(1)
    }
  },
  mounted(){
    this.localBuilding(1);

    // 联动
    this.$bus.$on('mainCurrentCommunityChange',(id)=>{
      this.setCurrentZyCommunity(id)
    });
  }
}
</script>

<style scoped>
.but{
  position: relative;
  margin-left: -1080px;
}

.tab{
  position: relative;

}
.page{
  position: relative;
  margin-left: 1000px;

}
.btn-circle{
  float: right;
}
.query{
  position: relative;
  margin-left: -720px;

}

</style>